<template>
  <div class="registrations-container">
    <div class="page-header">
      <el-button @click="$router.back()" class="back-btn" type="primary" link>
        <el-icon><ArrowLeft /></el-icon>
      </el-button>
      <h2>我的预约</h2>
    </div>

    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="5" animated />
    </div>

    <div v-else-if="registrations.length === 0" class="empty-container">
      <el-empty description="暂无预约记录">
        <el-button type="primary" @click="$router.push('/activities')">
          去预约活动
        </el-button>
      </el-empty>
    </div>

    <div v-else class="registrations-list">
      <div 
        v-for="registration in registrations" 
        :key="registration.registration_id"
        class="registration-card"
      >
        <div class="activity-info">
          <h3 class="activity-title">{{ registration.activity?.title }}</h3>
          <div class="activity-meta">
            <span class="activity-time">
              <el-icon><Clock /></el-icon>
              {{ formatTime(registration.activity?.start_time) }}
            </span>
            <span class="activity-status" :class="getStatusClass(registration.activity)">
              {{ getStatusText(registration.activity) }}
            </span>
          </div>
        </div>
        
        <div class="registration-info">
          <span class="registration-time">
            预约时间: {{ formatTime(registration.registration_time) }}
          </span>
          <el-button 
            v-if="registration.activity?.status === 'published'"
            type="primary" 
            size="small"
            @click="goToActivityDetail(registration.activity_id)"
          >
            查看详情
          </el-button>
          <el-button 
            v-else
            type="info" 
            size="small"
            disabled
          >
            已结束
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowLeft, Clock } from '@element-plus/icons-vue'
import { getMyRegistrations } from '@/api/activities'

interface Activity {
  activity_id: number
  title: string
  start_time: string
  end_time: string
  status: string
}

interface Registration {
  registration_id: number
  audience_id: number
  activity_id: number
  registration_time: string
  status: string
  activity: Activity
}

const router = useRouter()
const registrations = ref<Registration[]>([])
const loading = ref(true)

const fetchMyRegistrations = async () => {
  try {
    const response = await getMyRegistrations()
    registrations.value = response.data.registrations || []
  } catch (error) {
    ElMessage.error('获取预约记录失败')
    console.error('Error fetching registrations:', error)
  } finally {
    loading.value = false
  }
}

const formatTime = (timeString: string) => {
  if (!timeString) return ''
  return new Date(timeString).toLocaleString('zh-CN')
}

const getStatusClass = (activity: Activity) => {
  const status = activity?.status
  switch (status) {
    case 'published': return 'status-published'
    case 'ongoing': return 'status-ongoing'
    case 'completed': return 'status-completed'
    case 'cancelled': return 'status-cancelled'
    default: return 'status-pending'
  }
}

const getStatusText = (activity: Activity) => {
  const status = activity?.status
  switch (status) {
    case 'published': return '预约中'
    case 'ongoing': return '进行中'
    case 'completed': return '已结束'
    case 'cancelled': return '已取消'
    default: return '待发布'
  }
}

const goToActivityDetail = (activityId: number) => {
  router.push(`/activity/${activityId}`)
}

onMounted(() => {
  fetchMyRegistrations()
})
</script>

<style scoped>
.registrations-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 16px;
}

.page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  color: white;
}

.page-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.loading-container,
.empty-container {
  padding: 40px 0;
}

.registrations-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.registration-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.activity-info {
  margin-bottom: 12px;
}

.activity-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.activity-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.activity-time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #666;
}

.activity-status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-published {
  background: #e6f7ff;
  color: #1890ff;
}

.status-ongoing {
  background: #f6ffed;
  color: #52c41a;
}

.status-completed {
  background: #f5f5f5;
  color: #999;
}

.status-cancelled {
  background: #fff2f0;
  color: #ff4d4f;
}

.registration-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.registration-time {
  font-size: 12px;
  color: #999;
}
</style>